import { selectRecord } from '@/services/api/api-assess-week-culture-record';
import { updateSynchrony } from '@/services/api/api-datahub-synchrony';
import { CheckOutlined, CopyOutlined, DownloadOutlined, LinkOutlined } from '@ant-design/icons';
import { ActionType, DrawerForm } from '@ant-design/pro-components';
import { useAccess } from '@umijs/max';
import {
  Button,
  Descriptions,
  Divider,
  Flex,
  Image,
  message,
  Space,
  Spin,
  Tag,
  Typography,
  Upload,
  UploadFile,
} from 'antd';
import React, { useRef, useState } from 'react';
const { Paragraph } = Typography;
interface DetailRecordProps {
  recordId: string;
  recordName: string;
  areaId: string;
  areaName: string;
  releaseTimes: Array<string>; //季度发布时间范围
  priorityId?: string;
  onRefurbish: () => void;
}

const DetailRecord: React.FC<DetailRecordProps> = ({
  recordId,
  recordName,
  areaId,
  priorityId,
  onRefurbish,
}) => {
  const access = useAccess();

  const actionRef = useRef<ActionType>();

  const [details, setDetailsState] = useState<AssessWeekCultureRecordData.RecordSelect>();

  const [expanded, setExpanded] = useState(true);

  const getDetail = async () => {
    const res = await selectRecord({ id: recordId, areaId: areaId });
    setDetailsState(res.data);
  };

  /**
   * 版面
   * @param data
   * @returns
   */
  const viewDataEdition = (data: AssessWeekCultureRecordData.RecordSelect) => {
    if ('广大' == data.datahubFactoryName) {
      if (data?.datahubChannelName == '电子报纸') {
      } else if (data?.datahubChannelName == '电视视频') {
        return (
          <>
            <Descriptions.Item label="位置编号">{data?.dataEditionNo}</Descriptions.Item>
          </>
        );
      } else {
      }
    } else {
      if (data?.datahubChannelName == '电子报纸') {
        return (
          <>
            <Descriptions.Item label="版面编号">{data?.dataEditionNo}</Descriptions.Item>
            <Descriptions.Item label="版面名称">{data?.dataEditionName}</Descriptions.Item>
          </>
        );
      } else if (data?.datahubChannelName == '电视视频') {
        return <></>;
      } else {
      }
    }
  };

  /**
   * 封面
   * @param data
   * @returns
   */
  const viewEditionSnapshot = (data: AssessWeekCultureRecordData.RecordSelect) => {
    if ('广大' == data.datahubFactoryName) {
    } else {
      if (data?.datahubChannelName == '电子报纸') {
        if (data?.dataEditionSnapshot) {
          return <Image width={140} src={data?.dataEditionSnapshot[0]}></Image>;
        }
      } else if (data?.datahubChannelName == '电视视频') {
      }
    }
  };

  /**
   * 内容
   * @param data
   * @returns
   */
  const viewContent = (data: AssessWeekCultureRecordData.RecordSelect) => {
    if (data?.type == 1) {
      //1发稿-proof
      let viewPreviewList;

      if (data?.datahubChannelName == '电子报纸') {
        viewPreviewList = (
          <Space direction="horizontal" size={[8, 16]} wrap>
            {data?.dataEditionSnapshot?.map((item) => (
              <Image width={140} src={item} />
            ))}
          </Space>
        );
      } else if (data?.datahubChannelName == '电视视频') {
        viewPreviewList = (
          <Space direction="horizontal" size={[8, 16]} wrap>
            {data?.dataDatahubVideos?.map((item) => (
              <video
                style={{
                  width: '400px',
                  height: '230px',
                  background: '#F5F5F5',
                }}
                controls
                src={item}
              />
            ))}
          </Space>
        );
      }

      return (
        <>
          <Flex justify="space-between" align="center">
            <div>
              <Descriptions>
                <Descriptions.Item label="发布时间">{data?.dataReleaseTime}</Descriptions.Item>
              </Descriptions>
              <Descriptions>
                <Descriptions.Item label="区域">
                  <div>
                    {!expanded &&
                      data?.areas?.slice(0, 3)?.map((item) => {
                        if (item.length > 0) {
                          return (
                            <div style={{ display: 'flex' }}>
                              <Space style={{ lineHeight: 2 }}>
                                {item.map((i) => (
                                  <Tag key={i.id}>{i.name}</Tag>
                                ))}
                              </Space>
                            </div>
                          );
                        }
                      })}
                    {expanded &&
                      data?.areas?.map((item) => {
                        if (item.length > 0) {
                          return (
                            <div style={{ display: 'flex' }}>
                              <Space style={{ lineHeight: 2 }}>
                                {item.map((i) => (
                                  <Tag key={i.id}>{i.name}</Tag>
                                ))}
                              </Space>
                            </div>
                          );
                        }
                      })}
                    {!expanded && data?.areas?.length > 3 && (
                      <span style={{ color: '#1677FF' }} onClick={() => setExpanded(true)}>
                        展开
                      </span>
                    )}
                    {expanded && data?.areas?.length > 3 && (
                      <span style={{ color: '#1677FF' }} onClick={() => setExpanded(false)}>
                        收起
                      </span>
                    )}
                  </div>
                </Descriptions.Item>
              </Descriptions>
              <Descriptions>
                <Descriptions.Item label="链接">
                  <Typography.Paragraph copyable>
                    <a
                      href={data?.dataSourceUrl}
                      target="_blank"
                      style={{ display: 'inline-block' }}
                    >
                      {data?.dataSourceUrl}
                    </a>
                  </Typography.Paragraph>
                </Descriptions.Item>
              </Descriptions>
            </div>
          </Flex>
          <Divider />

          {viewPreviewList}
          <Divider />
          <Typography.Title
            level={3}
            style={{ textAlign: 'center' }}
            copyable={{
              icon: [
                <CopyOutlined
                  style={{
                    fontSize: '16px',
                  }}
                  key="copy-icon"
                />,
                <CheckOutlined
                  style={{
                    fontSize: '16px',
                  }}
                  key="copied-icon"
                />,
              ],
            }}
          >
            {data?.dataName}
          </Typography.Title>
          <br />
          <Typography.Paragraph
            style={{
              marginRight: 28,
            }}
          >
            <blockquote>
              {data?.remarks}
              <a href={data?.dataSourceUrl} target="_blank" style={{ display: 'inline-block' }}>
                <LinkOutlined />
                查看原文
              </a>
            </blockquote>
          </Typography.Paragraph>
          <br />
          <Flex justify="space-between" align="center">
            <span>附件：</span>
            <Button
              type="primary"
              key="import"
              size="small"
              icon={<DownloadOutlined />}
              onClick={() => {
                data?.dataDatahubOthers.forEach(function (item) {
                  window.open(item.content, '_blank');
                });
              }}
            >
              全部下载
            </Button>
          </Flex>
          <Upload
            listType="picture"
            multiple
            fileList={data?.dataDatahubOthers?.map((item) => {
              return {
                uid: item.id,
                name: item.name,
                url: item.content,
                mimeType: item.mimeType,
                status: 'done',
              };
            })}
            showUploadList={{
              downloadIcon: (
                <div style={{ marginLeft: '-100px', padding: '17px 0', marginTop: '-15px' }}>
                  <DownloadOutlined
                    style={{
                      marginRight: '10px',
                    }}
                  />
                  点击下载
                </div>
              ),
              showRemoveIcon: false,
              showDownloadIcon: true,
            }}
            onPreview={async (file: UploadFile) => {}}
          />
        </>
      );
    } else if (data?.type == 2) {
      let viewContent;

      if ('广大' == data?.datahubFactoryName) {
        if (data?.datahubChannelName == '电子报纸') {
        } else if (data?.datahubChannelName == '电视视频') {
          viewContent = (
            <>
              <Typography.Title level={3} style={{ textAlign: 'center' }}>
                {data?.dataName}
              </Typography.Title>
              <video
                style={{
                  marginTop: '20px',
                  width: '100%',
                  height: '300px',
                  background: '#F5F5F5',
                }}
                controls
                src={data?.dataDatahubVideos[0]}
              />
              <Paragraph>
                <a href={data?.dataSourceUrl} target="_blank" style={{ display: 'inline-block' }}>
                  <LinkOutlined />
                  查看原文
                </a>
              </Paragraph>
              <Paragraph>
                <blockquote
                  style={{
                    fontSize: 16,
                    whiteSpace: 'pre-wrap',
                  }}
                >
                  {data?.dataContent}
                </blockquote>
              </Paragraph>
            </>
          );
        } else {
        }
      } else {
        if (data?.datahubChannelName == '电子报纸') {
          viewContent = (
            <>
              {data?.dataName ? (
                <Typography.Title level={3} style={{ textAlign: 'center' }}>
                  {data?.dataName}
                </Typography.Title>
              ) : (
                <Typography.Title level={3} style={{ textAlign: 'center' }}>
                  暂无标题
                </Typography.Title>
              )}
              <br />
              <Paragraph>
                <blockquote>
                  {data?.dataAbstracts}
                  <a href={data?.dataSourceUrl} target="_blank" style={{ display: 'inline-block' }}>
                    <LinkOutlined />
                    查看原文
                  </a>
                </blockquote>
              </Paragraph>
              {data?.dataContent && (
                <>
                  <div
                    dangerouslySetInnerHTML={{
                      __html: `${data?.dataContent}`,
                    }}
                    style={{
                      display: 'inline',
                      whiteSpace: 'pre-wrap',
                      fontSize: '20px',
                    }}
                  />
                </>
              )}
            </>
          );
        } else if (data?.datahubChannelName == '电视视频') {
          viewContent = (
            <>
              <video width={140} src={data?.dataSourceUrl}></video>
              {data?.dataName ? (
                <Typography.Title level={3} style={{ textAlign: 'center' }}>
                  {data?.dataName}
                </Typography.Title>
              ) : (
                <Typography.Title level={3} style={{ textAlign: 'center' }}>
                  暂无标题
                </Typography.Title>
              )}
              <video
                style={{
                  marginTop: '20px',
                  width: '100%',
                  height: '300px',
                  background: '#F5F5F5',
                }}
                controls
                src={data?.dataDatahubVideos[0]}
              />
              <Paragraph
                style={{
                  fontSize: 16,
                  whiteSpace: 'pre-wrap',
                }}
              >
                <blockquote>{data?.dataContent}</blockquote>
              </Paragraph>
            </>
          );
        } else {
        }
      }

      //2发稿-datahub
      return (
        <>
          <Flex justify="space-between" align="center">
            <div>
              <Descriptions>
                <Descriptions.Item label="等级">
                  <Tag
                    color={
                      data?.datahubLevelId === '1000'
                        ? 'error'
                        : data?.datahubLevelId === '2000'
                        ? 'warning'
                        : 'success'
                    }
                  >
                    {data?.datahubLevelName}
                  </Tag>
                </Descriptions.Item>
                <Descriptions.Item label="来源">
                  <Tag color="orange">{data?.datahubSourceName}</Tag>
                </Descriptions.Item>
                <Descriptions.Item label="渠道">
                  <Tag color="success">{data?.datahubChannelName}</Tag>
                </Descriptions.Item>
                <Descriptions.Item label="聚焦">
                  <Tag color="success">{data?.datahubFocusName}</Tag>
                </Descriptions.Item>
                {viewDataEdition(data)}
                <Descriptions.Item label="发布时间">{details?.dataReleaseTime}</Descriptions.Item>
              </Descriptions>
              <Descriptions>
                <Descriptions.Item label="区域">
                  <div>
                    {!expanded && (
                      <Space style={{ lineHeight: 2 }}>
                        {data?.areas?.splice(0, 3).map((item) => {
                          if (item.length > 0) {
                            return (
                              <Tag style={{ display: 'flex' }}>
                                {item.map((i, index) => (
                                  <>
                                    {index == 0 ? '' : ' - '}
                                    {i.name}
                                  </>
                                ))}
                              </Tag>
                            );
                          }
                        })}
                      </Space>
                    )}
                    {expanded && (
                      <Space style={{ lineHeight: 2 }}>
                        {data?.areas?.map((item) => {
                          if (item.length > 0) {
                            return (
                              <Tag style={{ display: 'flex' }}>
                                {item.map((i, index) => (
                                  <>
                                    {index == 0 ? '' : ' - '}
                                    {i.name}
                                  </>
                                ))}
                              </Tag>
                            );
                          }
                        })}
                      </Space>
                    )}
                    {!expanded && data?.areas?.length > 3 && (
                      <span style={{ color: '#1677FF' }} onClick={() => setExpanded(true)}>
                        展开
                      </span>
                    )}
                    {expanded && data?.areas?.length > 3 && (
                      <span style={{ color: '#1677FF' }} onClick={() => setExpanded(false)}>
                        收起
                      </span>
                    )}
                  </div>
                </Descriptions.Item>
                {data?.datahubKeywords && data?.datahubKeywords.length > 0 && (
                  <Descriptions.Item label="关键词">
                    <Space size={[0, 8]} wrap>
                      {data?.datahubKeywords?.map((item) => {
                        return <Tag key={item.id}>{item.name}</Tag>;
                      })}
                    </Space>
                  </Descriptions.Item>
                )}
              </Descriptions>
              {data?.datahubLabels && data?.datahubLabels.length > 0 && (
                <div style={{ marginTop: -5, lineHeight: 2 }}>
                  <span
                    style={{ color: '#8C8C8C', marginRight: 10, fontSize: 14, fontWeight: 200 }}
                  >
                    标签:
                  </span>
                  <Space wrap>
                    {data?.datahubLabels.map((item) => {
                      return <Tag key={item.id}> {item.name}</Tag>;
                    })}
                  </Space>
                </div>
              )}
              {data?.datahubChannelName != '电子报纸' && (
                <Descriptions
                  style={{
                    marginTop: 10,
                  }}
                >
                  <Descriptions.Item label="原文链接">
                    <a href={data?.dataSourceUrl} target="_blank">
                      <Paragraph copyable>{data?.dataSourceUrl}</Paragraph>
                    </a>
                  </Descriptions.Item>
                </Descriptions>
              )}
            </div>
            <div> {viewEditionSnapshot(data)}</div>
          </Flex>
          <Divider />
          {viewContent}
        </>
      );
    }
  };

  return (
    <DrawerForm
      title={
        <Space>
          <div>{details?.dataName}</div>
          {details?.isPriority == 1 && <Tag color={'warning'}>重点报道</Tag>}
        </Space>
      }
      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,
        minWidth: 400,
      }}
      trigger={<a>{recordName}</a>}
      submitter={false}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
        width: 900,
      }}
      onOpenChange={(visible) => {
        if (visible) {
          getDetail();
        } else {
          onRefurbish();
        }
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        const response = await updateSynchrony({ ...values });
        if (response.code === 0) {
          message.success('提交成功');
          onRefurbish();
          return false;
        } else {
          return false;
        }
      }}
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={details === undefined}
      >
        {details !== undefined && (
          <>
            <Descriptions>
              <Descriptions.Item label="来源">
                <Space wrap>
                  {details?.proofSourceCascaders?.map((item) => (
                    <Tag>{item.name}</Tag>
                  ))}
                </Space>
              </Descriptions.Item>
            </Descriptions>
            <Typography
              style={{
                marginBottom: 25,
              }}
            >
              {details?.proofSourceDescribes !== null && (
                <Typography.Paragraph>
                  <blockquote>{details?.proofSourceDescribes}</blockquote>
                </Typography.Paragraph>
              )}
            </Typography>
            <Divider />
            {viewContent(details)}
          </>
        )}
      </Spin>
    </DrawerForm>
  );
};
export default DetailRecord;
